<template>
  <el-dialog
    v-model="dialogVisible"
    title="发布帖子"
    width="600px"
    :close-on-click-modal="false"
    :before-close="handleBeforeClose"
  >
    <div class="category-dialog-content">
      <!-- 一级分类 -->
      <div class="category-section">
        <div class="category-label">
          <span class="required-mark">※</span>一级分类：
        </div>
        <div class="category-options">
          <div 
            v-for="category in primaryCategories" 
            :key="category.id"
            class="category-option"
            :class="{ 'selected': selectedPrimary === category.id }"
            @click="selectPrimaryCategory(category.id)"
          >
            {{ category.name }}
          </div>
        </div>
      </div>
      
      <!-- 二级分类 -->
      <div class="category-section" v-if="secondaryCategories.length > 0">
        <div class="category-label">
          <span class="required-mark">※</span>二级分类：
        </div>
        <div class="category-options">
          <div 
            v-for="category in secondaryCategories" 
            :key="category.id"
            class="category-option"
            :class="{ 'selected': selectedSecondary === category.id }"
            @click="selectSecondaryCategory(category.id)"
          >
            {{ category.name }}
          </div>
        </div>
      </div>
      
      <!-- 操作按钮 -->
      <div class="action-buttons">
        <el-button @click="handleCancel">取消</el-button>
        <el-button 
          type="primary" 
          @click="handleConfirm"
          :disabled="!canConfirm"
        >
          确定并发布
        </el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import { ElMessage } from 'element-plus'

// 定义分类接口
interface Category {
  id: string | number;
  name: string;
  parentId?: string | number | null;
}

// 定义props
interface Props {
  postData?: any;
}

const props = defineProps<Props>()

// 定义emit
const emit = defineEmits<{
  (e: 'close'): void;
  (e: 'confirm', data: any): void;
}>()

// 弹窗状态
const dialogVisible = ref(false)

// 分类数据
const primaryCategories = ref<Category[]>([
  { id: 'A', name: 'A' },
  { id: 'B', name: 'B' },
  { id: 'C', name: 'C' }
])

// 选中的一级分类
const selectedPrimary = ref<string | number | null>(null)

// 二级分类数据
const secondaryCategoriesMap = ref<Record<string | number, Category[]>>({
  'A': [
    { id: 'A1', name: 'A1', parentId: 'A' },
    { id: 'A2', name: 'A2', parentId: 'A' },
    { id: 'A3', name: 'A3', parentId: 'A' }
  ],
  'B': [
    { id: 'B1', name: 'B1', parentId: 'B' },
    { id: 'B2', name: 'B2', parentId: 'B' }
  ],
  'C': [
    { id: 'C1', name: 'C1', parentId: 'C' },
    { id: 'C2', name: 'C2', parentId: 'C' }
  ]
})

// 当前选中的二级分类
const selectedSecondary = ref<string | number | null>(null)

// 计算当前应显示的二级分类
const secondaryCategories = computed(() => {
  if (!selectedPrimary.value) return []
  return secondaryCategoriesMap.value[selectedPrimary.value] || []
})

// 是否可以确认
const canConfirm = computed(() => {
  if (!selectedPrimary.value) return false
  
  // 如果有二级分类，必须选择一个
  if (secondaryCategories.value.length > 0 && !selectedSecondary.value) {
    return false
  }
  
  return true
})

// 选择一级分类
const selectPrimaryCategory = (categoryId: string | number) => {
  selectedPrimary.value = categoryId
  // 重置二级分类选择
  selectedSecondary.value = null
}

// 选择二级分类
const selectSecondaryCategory = (categoryId: string | number) => {
  selectedSecondary.value = categoryId
}

// 打开弹窗
const openDialog = (postData?: any) => {
  dialogVisible.value = true
  
  // 重置选择
  selectedPrimary.value = null
  selectedSecondary.value = null
}

// 弹窗关闭前的处理
const handleBeforeClose = (done: () => void) => {
  emit('close')
  done()
}

// 取消
const handleCancel = () => {
  dialogVisible.value = false
  emit('close')
}

// 确认
const handleConfirm = () => {
  if (!canConfirm.value) {
    ElMessage.warning('请选择分类')
    return
  }
  
  // 构建带分类信息的发布数据
  const publishData = {
    ...props.postData,
    primaryCategory: selectedPrimary.value,
    secondaryCategory: selectedSecondary.value
  }
  
  // 关闭弹窗
  dialogVisible.value = false
  
  // 触发确认事件
  emit('confirm', publishData)
}

// 暴露方法
defineExpose({
  openDialog
})
</script>

<style scoped>
.category-dialog-content {
  padding: 1rem 0;
}

.category-section {
  margin-bottom: 2rem;
}

.category-label {
  font-size: 1rem;
  font-weight: 500;
  margin-bottom: 1rem;
  color: #333;
}

.required-mark {
  color: #f56c6c;
  margin-right: 0.25rem;
}

.category-options {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.category-option {
  min-width: 5rem;
  padding: 0.75rem 1.5rem;
  border: 1px solid #dcdfe6;
  border-radius: 0.25rem;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s;
}

.category-option:hover {
  border-color: #c0c4cc;
  background-color: #f5f7fa;
}

.category-option.selected {
  border-color: #409eff;
  background-color: #ecf5ff;
  color: #409eff;
}

.action-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
  margin-top: 2rem;
}
</style> 